<style>
    .none{
        display: none;
    }
</style>
<div class="container-fluid mt-4">
    <!-- 头部标题 -->
    <div class="card mb-2">
        <!--Card content-->
        <div class="card-body">
            <h6 class="mb-2 mb-sm-0 pt-1" style="text-align: center;">课程管理</h6>
        </div>
    </div>
    <!-- 头部标题-end -->
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg">
            <div class="card mb-2">
                <!--Card content-->
                <div class="card-body">
                    <form>
                        <div class="form-row align-items-center mb-3">
                            <div class="col-auto">
                                <div class="input-group input-group-sm">
                                    <input type="text" class="form-control text" oninput="search()" placeholder="课程名称">
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-secondary" type="button" onclick="search()">搜索</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-auto">
                                <button type="button" class="btn btn-success btn-sm" data-toggle="modal"
                                    data-target="#addCourse">添加新课程</button>
                            </div>
                        </div>
                    </form>
                    <table class="table table-striped table-bordered table-align">
                        <thead class="thead-dark">
                            <tr>
                                <th scope="col">课程编号</th>
                                <th scope="col">课程名称</th>
                                <th scope="col">课程状态</th>
                                <th scope="col">操作</th>
                            </tr>
                        </thead>
                        <tbody id="showBody">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 课程添加 -->
<div class="modal fade" id="addCourse" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">课程添加</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="coursename">课程名称</label>
                        <input type="text" class="form-control" id="coursename">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary"  onclick="newClass(this)">添加</button>
            </div>
        </div>
    </div>
</div>
<!-- 课程添加-结束 -->
<!-- 课程修改 -->
<div class="modal fade" id="settingCourse" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">课程修改</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="course1">课程编号</label>
                        <input type="text" class="form-control" value="1" id="course1" readonly>
                    </div>
                    <div class="form-group">
                        <label for="coursename1">课程名称</label>
                        <input type="text" class="form-control" value="java" id="coursename1">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="update(this)">更新</button>
            </div>
        </div>
    </div>
</div>
<!-- 课程修改-结束 -->
<script>
    //界面刷新
    function refresh() {
        $.ajax({
            url:"../videoCourse_stu/server/coursePage.php",
            type:"post",
        }).done((result)=>{
            // console.log(result);
            var str="";
            $("#showBody").html("");
            for (const p of result) {
                var status="";
                var show="";
                if (p.status==1) {
                    status="启用";
                    show="禁用";
                    str+=`<tr>
                            <th>${p.courseId}</th>
                            <td class="name">${p.courseName}</td>
                            <td class="text-success">${status}</td>
                            <td>
                                <button type="button" class="btn btn-danger btn-sm" onclick="change(this)">${show}</button>
                                <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                    data-target="#settingCourse" onclick="show(this)">更新</button>
                            </td>
                        </tr>`;
                }else{
                    status="禁用";
                    show="启用";
                    str+=`<tr>
                            <th>${p.courseId}</th>
                            <td class="name">${p.courseName}</td>
                            <td class="text-danger">${status}</td>
                            <td>
                                <button type="button" class="btn btn-info btn-sm" onclick="change(this)">${show}</button>
                                <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                    data-target="#settingCourse" onclick="show(this)">更新</button>
                            </td>
                        </tr>`;
                }
            }
            $("#showBody").append(str);
        });
    }
    refresh();

    //搜索
    function search() {
        var txt=$(".text").val();
        // console.log(txt);
        if (txt) {
            for (let i = 0; i < $(".name").length; i++) {
            var str=$(".name:eq("+i+")").html();
            // console.log(str);
            if(txt==str){
                $("#showBody tr").eq(i).removeClass("none");
                $("#showBody tr").eq(i).siblings().addClass("none");
            }
        }
        }else{
            for (let j = 0; j <  $(".name").length; j++) {
                $("#showBody tr").eq(j).removeClass("none");
            }
        }
    }

    //添加课程
    function newClass(obj) {
        var id=$("#showBody tr").length+1;
        var name=$("#coursename").val();
        if (name) {
            $.ajax({
                url:"../videoCourse_stu/server/coursePageAdd.php",
                type:"post",
                data:{
                    id,
                    name,
                    status:1
                },
                dataType:"json"
    
            }).done((result)=>{
                refresh();
            });
            $(obj).attr("data-dismiss","modal")
        }else{
            toastr.warning("不能为空")
        }
    }

    //启用禁用按钮
    function change(obj) {
        // console.log($(obj).html());
        if ($(obj).html()=="禁用") {
            var id=$(obj).parents()[1].children[0].innerHTML;
            // console.log(id);
            var status=0;
            $(obj).html("启用");
        }else{
            $(obj).html("禁用");
            var id=$(obj).parents()[1].children[0].innerHTML;
            // console.log(id);
            var status=1;
        }

        $.ajax({
            url:"../videoCourse_stu/server/coursePageChange.php",
                type:"post",
                data:{
                    id,
                    status
                },
        }).done((result)=>{
            // console.log(result);
            if (!result.success) {
                toastr.error("修改失败")
            }
        });
        refresh();
        $(obj).attr("data-dismiss","modal")
    }

    //更新按钮更改数据
    function show(obj) {
        var id=$(obj).parents()[1].children[0].innerHTML;
        var name=$(obj).parents()[1].children[1].innerHTML;
        $("#course1").val(id);
        $("#coursename1").val(name);
    }

    //更新按钮
    function update(obj) {
        var id=$("#course1").val();
        var name=$("#coursename1").val();

        $.ajax({
            url:"../videoCourse_stu/server/coursePageUpdate.php",
                type:"post",
                data:{
                    id,
                    name
                },
        }).done((result)=>{
            console.log(result);
        });
        refresh();
        $(obj).attr("data-dismiss","modal")
    }
</script>